Свойство classList
Пример
Добавьте класс "mystyle" в элемент "div":
document.getElementById("myDIV").classList.add("mystyle");
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство classList возвращает имя класса элемента в виде объекта DOMTokenList.
Это свойство полезно для добавления, удаления и переключения классов CSS в элементе.
Свойство classList доступно только для чтения, однако вы можете изменить его с помощью методов add() и remove().
Кроссбраузерное решение: Свойство classList не поддерживается в IE9 и более ранних версиях. Однако вы можете использовать Свойство className или регулярные выражения для кроссбраузерного решения (см. "Ещё примеры" внизу этой страницы).
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Синтаксис
element.classList
Свойства
Свойство | Описание |
---|---|
length | Возвращает количество классов в списке. Это свойство доступно только для чтения |
Методы
Метод | Описание |
---|---|
add(class1, class2, ...) | Добавляет одно или несколько имен классов к элементу. Если указанный класс уже существует, класс не будет добавлен |
contains(class) | Возвращает логическое значение, указывающее, имеет ли элемент указанное имя класса.
Возможные значения:
|
item(index) | Возвращает имя класса с указанным индексным номером из элемента. Индекс начинается с 0. Возвращает null, если индекс находится вне диапазона |
remove(class1, class2, ...) | Удаляет одно или несколько имен классов из элемента. Примечание: Удаление класса, который не существует, не приводит к ошибке |
toggle(class, true|false) | Переключение между именем класса для элемента. Первый параметр удаляет указанный класс из элемента и возвращает значение false. Если класс не существует, он добавляется к элементу, и возвращаемое значение равно true. Необязательный второй Параметр - это логическое значение, которое заставляет добавлять или удалять класс, независимо от того, существовал он уже или нет. Например: Удалить класс: element.classList.toggle("classToRemove", false); Добавить класс:element.classList.toggle("classToAdd", true); Примечание: Второй параметр не поддерживается в Internet Explorer или Opera 12 и более ранних версиях. |
Технические детали
Возвращает значение | DOMTokenList, содержащий список имен классов элемента |
---|
Ещё примеры
Пример
Добавьте несколько классов к элементу <div>:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
Попробуйте сами »
Пример
Удалить класс из элемента <div>:
document.getElementById("myDIV").classList.remove("mystyle");
Попробуйте сами »
Пример
Удалить множество классов из элемента <div>:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
Попробуйте сами »
Пример
Переключение между двумя классами для элемента <div>:
document.getElementById("myDIV").classList.toggle("newClassName");
Попробуйте сами »
Пример
Получить имя(ы) класса (ов) элемента <div>:
<div id="myDIV" class="mystyle anotherClass thirdClass">Я являюсь элементом DIV</div>
var x = document.getElementById("myDIV").classList;
Попробуйте сами »
Пример
Узнайте, сколько имен классов имеет элемент <div>:
var x = document.getElementById("myDIV").classList.length;
Попробуйте сами »
Пример
Получить имя первого класса (индекс 0) элемента <div>:
var x = document.getElementById("myDIV").classList.item(0);
Попробуйте сами »
Пример
Узнайте, имеет ли элемент класс "mystyle":
var x = document.getElementById("myDIV").classList.contains("mystyle");
Попробуйте сами »
Пример
Узнайте, есть ли у элемента класс "mystyle". Если это так, удалите другое имя класса:
var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Не смог найти его.");
}
Попробуйте сами »
Пример
Переключайтесь между классами, чтобы создать выпадающую кнопку:
// Получите кнопку, и когда пользователь нажмет на нее, выполните myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction переключается между добавлением и удалением класса show, который используется для скрытия и отображения содержимого выпадающего списка */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Попробуйте сами »
Дополнительный пример: add
Кроссбраузерное решение при использовании classList. Метод add(), для IE9 и более ранних версий:
var x, name, arr;
x = document.getElementById("myDIV");
if (x.classList)
{
x.classList.add("mystyle");
} else {
name = "mystyle";
arr = x.className.split(" ");
if (arr.indexOf(name) == -1) {
x.className += " " + name;
}
}
Попробуйте сами »
Дополнительный пример: remove
Кроссбраузерное решение при использовании classList. Метод remove(), для IE9 и более ранних версий:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle\b/g, ""); //, для IE9 и более ранних версий
}
Попробуйте сами »
Дополнительный пример: contains
Кроссбраузерное решение при использовании classList. Метод contains(), для IE9 и более ранних версий:
var x = document.getElementById("myDIV");
if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle\b/g.test(x.className)); //Для IE9 и более ранних версий
}
Попробуйте сами »
Дополнительный пример: toggle
Кроссбраузерное решение при использовании classList. Метод toggle(), для IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// Для IE9
var classes = x.className.split(" ");
var i = classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
}
Попробуйте сами »
Пример
Создайте липкую панель навигации:
// Получить панель навигации
var navbar = document.getElementById("navbar");
//
Получить смещенное положение навигационной панели
var sticky = navbar.offsetTop;
// Добавьте класс sticky на панель навигации, когда достигнете ее положения прокрутки. Удалите sticky, когда вы покинете положение прокрутки.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Синтаксис
CSS Справочник: CSS .class Селектор
HTML DOM Справочник: HTML DOM className Свойство
HTML DOM Справочник: HTML DOM getElementsByClassName() Метод
HTML DOM Справочник: HTML DOM Объект стиля
❮ Объект элемента